import React, {PureComponent} from 'react';
import PropTypes from 'prop-types';
import QueryPanel from './QueryPanel';
import TablePanel from './TablePanel';
import DetailPanel from './DetailPanel';
import NewPanel from './NewPanel';
import ReceivePanel from './ReceivePanel';
import DraftPanel from './DraftPanel';
import DetailHistory from './History/DetailHistory';
import QueryHistory from './History/QueryHistory';
import TableHistory from './History/TableHistory';
import {Card} from 'antd';
import routes from './routes';
import {Route, Switch} from 'react-router-dom';
import Breadcrumb from 'Shell/components/Breadcrumb';
import 'ant-design-pro/dist/ant-design-pro.css';
import NoMatchRoute from '../common/NoMatchRoute';
import Return from '../common/Return';

export class App extends PureComponent {
    componentDidMount() {
        this.props.queryInitData();
    }

    render() {
        return (
            <div>
                <Route render={props => <Breadcrumb location={props.location} />} />
                <div className="page-main">
                    <Switch>
                        <Route path={routes.query.url()} exact render={props =>
                            <div>
                                <Card><QueryPanel history={props.history}/></Card>
                                <Card><TablePanel history={props.history}/></Card>
                            </div>} />

                        <Route path={routes.detail.url()} exact render={props =>
                            <DetailPanel id={props.match.params.id} history={props.history}/>} />

                        <Route path={routes.receive.url()} exact render={props =>
                            <ReceivePanel id={props.match.params.id} history={props.history}/>} />

                        <Route path={routes.add.url()} exact render={props =>
                            <NewPanel history={props.history} />} />

                        <Route path={routes.update.url()} exact render={props =>
                            <NewPanel id={props.match.params.id} history={props.history} />} />

                        <Route path={routes.approve.url()} exact render={props =>
                            <NewPanel id={props.match.params.id} page={'approve'} history={props.history} />} />

                        <Route path={routes.financeApprove.url()} exact render={props =>
                            <NewPanel id={props.match.params.id} page={'finance'} history={props.history} />} />

                        <Route path={routes.draft.url()} exact render={props =>
                            <DraftPanel id={props.match.params.id} history={props.history} />} />

                        <Route path={routes.history.url()} exact render={props =>
                            <div>
                                <Card><QueryHistory history={props.history}/></Card>
                                <Card><TableHistory history={props.history}/></Card>
                                <div className="page-toolbar">
                                    <Return
                                        onConfirm={() => props.history.push(routes.query.url())} />
                                </div>
                            </div>} />
                        <Route path={routes.detailhistory.url()} exact render={props =>
                            <DetailHistory id={props.match.params.id} history={props.history}/>} />
                        <NoMatchRoute link={routes.query.url()} />
                    </Switch>
                </div>
            </div>
        );
    }
}

App.propTypes = {
    queryInitData: PropTypes.func
};

import {connect} from 'react-redux';
import {getInitData} from './actions';

const mapDispatchToProps = dispatch => ({
    queryInitData: () => dispatch(getInitData())
});

export default connect(null, mapDispatchToProps)(App);
